<template>
  <div class="home">
    <el-container>
      <!-- <el-header height="70px">
        <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
          <el-col :span="8">
            <img src="@/assets/logo.jpg" style="height: 40px;border-radius: 10px;margin: 10px;" alt="">
            <div style="font-size: 16px;margin-left: 10px;line-height: 60px;display: inline-block;overflow: hidden;">
              智能审批日报可视化</div>
          </el-col>
          <el-col :span="10">
            <div>
            
            </div>
          </el-col>
        </el-row>
      </el-header> -->
      <el-main>
        <div class="container">
          <el-row :gutter="20" align="bottom" type="flex" class="row-bg" justify="space-around">
            <el-col :span="12">
              <div>
                <div class="name">
                  <img src="@/assets/logo.jpg" style="height: 40px;border-radius: 10px;margin: 12px;" alt="">
                  <span style="position: absolute;">云之家</span>
                </div>
                <div class="text1">智能审批日报可视化</div>
                <div class="tagline">您可以在浏览器中安装本插件，从而实现日报(项目日报、非项目日报)的可视化。</div>
              </div>
              <div class="btn">
                <el-button @click="downloadPlugin" type="primary" round>下载插件</el-button>
                <el-button style="background-color: #ebedf0;border: none;" round>使用教程</el-button>
                <span><a target="_blank" href="https://gitee.com/tysb7/Visualization-of-Yunzhi-Daily"><img style="height: 30px;position: absolute;margin: 5px 20px;" src="https://gitee.com/static/images/logo-black.svg" alt=""></a></span>
              </div>
            </el-col>
            <el-col :span="12">
              <img src="@/assets/Profit.png" style="width: 90%;" alt="">
            </el-col>
          </el-row>
          <div class="cardItem">
            <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
              <el-col :span="6">
                <div class="card">
                  <div class="title">快捷化</div>
                  <p class="details">浏览器插件一键安装，即可自动抓取ticket并获取日报数据。</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div class="title">可视化</div>
                  <p class="details">自动统计项目日报、非项目日报数据，柱状图的形式可视化展示。</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div class="title">明了化</div>
                  <p class="details">清晰明了的展示日报的所属项目、类型，以及统计日均、月均有效人天。</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div class="title">安全化</div>
                  <p class="details">接口使用30分钟时效的ticket，不涉及、不保存个人信息。</p>
                </div>
              </el-col>
            </el-row>

          </div>
        </div>
        <!-- <el-divider content-position="center">Copyright © 2024 terrytang All Rights Reserved.</el-divider> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
  },
  data() {
    return {
    };
  },
  methods: {
    downloadPlugin() {
      window.open('https://greasyfork.org/zh-CN/scripts/519243-%E4%BA%91%E4%B9%8B%E5%AE%B6%E6%97%A5%E6%8A%A5%E5%8F%AF%E8%A7%86%E5%8C%96', '_blank');
    }
  }

}
</script>
<style>
.container {
  max-width: 1200px;
  font-weight: 400;
  margin: 100px auto;
}

.name {
  line-height: 64px;
  font-size: 56px;
  color: #409EFF;
  text-align: left;
  font-weight: 500;
}

.text1 {
  line-height: 64px;
  font-size: 56px;
  text-align: left;
  font-weight: 500;
}

.tagline {
  line-height: 36px;
  font-size: 24px;
  color: rgba(60, 60, 67, .78);
  padding-top: 12px;
  max-width: 576px;
  text-align: left;
}

.btn {
  text-align: left;
  margin-top: 32px;
}

.cardItem {
  margin-top: 60px;
}

.cardItem .card {

  padding: 24px;
  font-size: 16px;
  font-weight: 400;
  background-color: #ebedf0;
  border-radius: 20px;

}

.cardItem .card .title {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(60, 60, 67);
}

.cardItem .card .details {
  flex-grow: 1;
  padding-top: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(60, 60, 67, 0.78);
}
</style>
